<template>
  <view class="content-item">
    <view v-if="isShowHistoryIndex" class="histroy-title">
      <view class="left-line"></view>
      <view class="tips-title">以下为历史记录</view>
      <view class="right-line"></view>
    </view>
    <view class="time">{{ showTime(item.timestamp) }}</view>
    <view class="card-item">
      <template v-if="item.list.length <= 3">
        <template v-if="item.list.length == 1">
            <view
              v-for="(subItem, subIndex) in item.list"
              :key="subIndex"
              class="card-item-content"
            >
              <view
                v-if="subIndex == 0"
                class="three-card"
                @click="handleToDetail(subItem)"
              >
                <image class="three-img" :src="subItem.photo"></image>
                <view class="three-title">{{ subItem.title }}</view>
              </view>
            </view>
        </template>
        <template v-else>
          <view
            v-for="(subItem, subIndex) in item.list"
            :key="subIndex"
            class="card-item-content"
          >
            <view
              v-if="subIndex == 0"
              class="one-card"
              @click="handleToDetail(subItem)"
            >
              <image class="one-img" :src="subItem.photo"></image>
              <view class="title">{{ subItem.title }}</view>
            </view>
            <view v-else class="two-card" @click="handleToDetail(subItem)">
              <view
                class="left"
                :class="{ 'left-line': subIndex == item.list.length - 1 }"
              >
                {{ subItem.title }}
              </view>
              <view class="right"> 温馨提示 </view>
            </view>
          </view>
        </template>
      </template>
      <template v-else>
        <template v-if="isOpenAllList">
          <view
            v-for="(subItem, subIndex) in item.list"
            :key="subIndex"
            class="card-item-content"
            @click="handleToDetail(subItem)"
          >
            <view
              v-if="subIndex == 0"
              class="one-card"
              @click="handleToDetail(subItem)"
            >
              <image class="one-img" :src="subItem.photo"></image>
              <view class="title">{{ subItem.title }}</view>
            </view>
            <view v-else class="two-card" @click="handleToDetail(subItem)">
              <view
                class="left"
                :class="{ 'left-line': subIndex == item.list.length - 1 }"
              >
                {{ subItem.title }}
              </view>
              <view class="right"> 温馨提示 </view>
            </view>
          </view>
        </template>
        <template v-else>
          <view
            v-for="(subItem, subIndex) in item.list"
            :key="subIndex"
            class="card-item-content"
          >
            <view
              v-if="subIndex == 0"
              class="one-card"
              @click="handleToDetail(subItem)"
            >
              <image class="one-img" :src="subItem.photo"></image>
              <view class="title">{{ subItem.title }}</view>
            </view>
            <view v-else class="two-card">
              <template v-if="subIndex < 3">
                <view
                  class="left"
                  :class="{ 'left-line': subIndex == item.list.length - 1 }"
                  @click="handleToDetail(subItem)"
                >
                  {{ subItem.title }}
                </view>
                <view class="right" @click="handleToDetail(subItem)">
                  温馨提示
                </view>
              </template>
              <template v-else>
                <view v-if="subIndex == 3" class="open-card" @click="openClick">
                  <view class="left-open"
                    >余下{{ item.list.length - 3 }}篇</view
                  >
                  <u-icon name="arrow-down" size="24" color="#ACACAC"></u-icon>
                </view>
              </template>
            </view>
          </view>
        </template>
      </template>
    </view>
  </view>
</template>

<script>
import { formatTimeFlex } from "@/utils/handle";
import { updateNotifyReadStatus } from "@/api/modules/career";
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
    isShowHistoryIndex: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      isOpenAllList: false,
    };
  },
  methods: {
    showTime(timestamp) {
      const time = parseInt(timestamp);
      //   console.log("----timestamp---->", time, this.isShowHistoryIndex);
      return formatTimeFlex(time);
    },
    handleToDetail(subItem) {
      console.log("----subItem--xxxxxxxxxxxxxxxxxxxxxx-->", subItem);
      this.updateNotifyStatus(subItem);
      if (subItem.subscribeId == 1) {
        uni.navigateTo({
          url: "/pagesSub/career/careerInfo/articleDetail?id=" + subItem.dataId,
        });
      }else{
        uni.navigateTo({
          url: "/pagesSub/public/jobDetail/index?jobId=" + subItem.dataId,
        });
      }
    },
    updateNotifyStatus(item) {
      let params = {
        id: item.id,
      };
      updateNotifyReadStatus(params).then((res) => {
        if (res && res.code == 200) {
          //   uni.showToast({
          //     icon: "none",
          //     title: "点击进入职讯",
          //   });
        } else {
          uni.showToast({
            icon: "none",
            title: res.status_desc,
            duration: 1000
          });
        }
      });
    },
    openClick() {
      this.isOpenAllList = !this.isOpenAllList;
    },
  },
};
</script>

<style lang="scss" scoped>
.content-item {
  .histroy-title {
    display: flex;
    margin: 32rpx;
    text-align: center;
    justify-content: space-between;

    .tips-title {
      margin: auto 0rpx;
      font-size: 26rpx;
      color: #bfbfbf;
    }
    .left-line {
      margin: auto 0rpx;
      width: 30%;
      height: 1.6rpx;
      background-color: #e1e1e1;
    }
    .right-line {
      margin: auto 0rpx;
      width: 30%;
      height: 1.6rpx;
      background-color: #e1e1e1;
    }
  }
  .time {
    margin: 20rpx;
    font-size: 26rpx;
    color: #888888;
    text-align: center;
  }
  .card-item {
    margin: 0 32rpx 16rpx 32rpx;
    border-radius: 16rpx;
    background-color: #ffffff;

    .one-card {
      .one-img {
        width: 100%;
        border-radius: 16rpx 16rpx 0rpx 0rpx;
      }
      .title {
        margin: -112rpx 0rpx 0rpx 0rpx;
        padding: 50rpx 32rpx 16rpx 32rpx;
        width: 100%;
        height: 112rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.7) 100%
        );
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .three-card {
      .three-img {
        width: 100%;
        border-radius: 16rpx 16rpx 0rpx 0rpx;
      }
      .three-title {
        margin: 44rpx 32rpx;
        width: 100%;
        height: 88rpx;
        line-height: 44rpx;
        color: #222;
        font-size: 32rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .two-card {
      display: flex;
      // height: 176rpx;
      justify-content: space-between;
      .left {
        height: 132rpx;
        width: 70%;
        margin: 44rpx 0rpx 0rpx 32rpx;
        border-bottom: 2rpx solid #fafafa;
        font-size: 32rpx;
        font-weight: bold;
        color: #222;
        line-height: 50rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .left-line {
        border-bottom: none;
      }

      .right {
        width: 112rpx;
        height: 112rpx;
        margin: 44rpx 32rpx auto 32rpx;
        text-align: center;
        font-size: 40rpx;
        font-weight: 900;
        color: #fff;
        background-color: #4f5dee;
        border-radius: 4rpx;
      }
    }
    .open-card {
      display: flex;
      margin: 24rpx 36rpx 24rpx 36rpx;
      width: 100%;
      justify-content: space-between;
      background-color: #fff;
      .left-open {
        font-size: 26rpx;
        color: #cf7b49;
      }
    }
  }
}
</style>
